<style>
page{
	background: #fafafa;
}
.g-header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
}
.g-header{
	background: #d71611;
	padding-top: var(--status-bar-height);
}
.m-head-search-box {
	width: 90%;
	margin: 0 auto;
	padding: 10upx 0;
	position: relative;
	overflow: hidden;
}
.m-header-left{
	position: absolute;
	display: flex;
	align-items: center;
	top: 50%;
	left: 0;
	margin-top: -35upx;
	width: 70upx;
	height: 70upx;
}
.m-head-search{
	margin-left: 70upx;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #ffffff;
	border-radius: 100upx;
	padding: 10upx 0;
}
.m-head-search input{
	flex: 1;
	height: 36upx;
	color: #828080;
	font-size: 28upx;
	padding-right: 15upx;
}
.m-head-search-icon{
	background: url(../../static/icons/search-icon.png) no-repeat;
	height: 37upx;
	width: 35upx;
	background-size: 100% 100%;
	margin: 0 20upx;
}
.m-sort-search{
	height: 76upx;
	width: 100%;
	line-height: 76upx;
    background: #fff;
	display: flex;
}
.m-sort{
	flex: 1;
	text-align: center;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.u-sort-title{
	font-size: 30upx;
}
.m-sort-icons{
	margin-left: 15upx;
    height: 46upx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.m-sort .m-sort-shaixuan .img{
	width: 30upx;
	height: 24upx;
	margin-left: 10upx;
}
.g-product-box{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f5f5f5;
    padding-top: 5px;
    margin-top: 84px;
}
.m-product-list{
	width: 100%;
	height: 100%;
	position: relative;
	background-size: 100% ;
	background-position: 0px;
	overflow: hidden;
}
.m-product-list-box{
	width: 730upx;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
}
.m-product{
	width: 49%;
	overflow: hidden;
	float: left;
	background: #fff;
	padding-bottom: 20upx;
	margin-bottom: 12upx;
    position: relative;
}
.m-product:nth-child(2n-1) {
	margin-right: 12upx;
}
.m-product .product-img{
	width: 100%;
	height: 359upx;
	overflow: hidden;
}
.m-product-info{
	width: 315upx;
	margin: 0 auto;
	overflow: hidden;
}
.u-product-title{
	width: 100%;
	font-size: 25upx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 15upx;
	height: 70upx;
}
.u-progress{
	width: 260upx;
	height: 25upx;
	background: #fdd0d0;
	border-radius: 25upx;
	margin-top: 26upx;
	position: relative;
}
.u-progress-have{
	position: absolute;
	height: 100%;
	background: #d71311;
	border-radius: 25upx;
}
.u-progress-siblings{
    position: absolute;
    right: -30px;
	font-size: 24upx;
	-webkit-text-size-adjust:none;
	-webkit-transform:scale(0.8);
	color: #d71311;
	text-align: center;
	position: absolute;
	height: 100%;
	line-height: 25upx;
	z-index: 1;
}
.u-product-price-box{
	margin-top: 35upx;
}
.u-product-price-l{
	color: #d71311;
	display: flex;
	align-items: center;
}
.u-product-price-mark{
	font-size: 24upx;
	margin-top: 8upx;
	margin-right: 5upx;
}
.u-product-price{
	font-size: 35upx;
	margin-left: 3upx;
}
.u-product-surplus-people{
	color: #828080;
	font-size: 24upx;
	margin-right: 20upx;
	padding-top: 4upx;
}
.u-product-user-list{
	position: relative;
	float: left;
}
.u-product-user-list image{
	height: 46upx;
	width: 48upx;
	float: left;
	position: absolute;
	left: 18upx;
	border-radius: 25upx;
}
.u-product-user-list image:nth-child(1){
	left: 0upx!important;
	z-index: 9;
}
.g-hide-ways{
	width: 100%;
	height: 100%;
    display: none;
}
.m-left-hide{
	z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    bottom: 0;
    left: 0px;
    transform: translateX(110%);
    -webkit-transform: translateX(110%);
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    overflow: scroll;
    padding-bottom: 50px;
	overflow-x: hidden;
}
.m-left-hide-act{
	transform: translateX(10%);
}
.u-empty-view{
	height: 100upx;
}
.m-attr-ul{
	width: 100%;
	height: 100%;
	padding: 30upx;
}
.u-attr-name{
	color: #666;
    font-size: 28upx;
    margin: 18upx 0;
	color: #fff;
}
.u-attr-value{
	display: inline-block;
    width: 149upx;
    height: 51upx;
    color: #fff;
    line-height: 51upx;
    border-radius: 8upx;
    text-align: center;
    font-size: 28upx;
    margin-bottom: 22upx;
    margin-right: 44upx;
	border: 2upx solid #fff;
	overflow: hidden;
}
.u-attr-value-act{
	border: none;
	background: #af110f;
}
.m-btn-btn{
	width: 100%;
	height: 94upx;
	position: fixed;
	bottom: 0;
	left: 0px;
	z-index: 999;
	background-color: #fff;
	transform: translateX(110%);
	-webkit-transform: translateX(110%);
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
}
.u-left-btn{
	width: 45%;
	float: left;
	height: 94upx;
	line-height: 94upx;
	text-align: center;
	background-color: #fff;
}
.m-right-btn{
	width: 53%;
	float: right;
	height: 94upx;
	line-height: 94upx;
	text-align: center;
	background-color: #a40b1d;
	color: #fff;
}
.m-confirm{
	padding-right: 25px;
}

/* 排序箭头 */
.u-arrow-up {
    width: 0;
    height: 0;
    border: 8upx solid #000;
    border-color: transparent transparent #777 transparent;
}
.u-arrow-down {
    width: 0;
    height: 0;
    border: 8upx solid #000;
    border-color: #777 transparent transparent transparent;
}


    .u-product-sign {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 75upx;
		height: 75upx;
    }
/* 筛选 */
	.uni-list-cell{ 
		margin-top: 50upx;
	}
	.uni-list-cell .g-input{
		display: flex;
		align-items: center;
	}
	.uni-list-cell .g-input input{
		flex: 1;
		border: 1px solid #cccccc;
		text-align: center;
		border-radius: 10upx;
		padding: 7upx 0;
		font-size: 32upx;
	}
	.uni-list-cell .g-input .line{
		width: 3%;
		height: 2px;
		background: #000000;
		margin: 0 20upx;
	}
	.uni-list-cell .text{
		padding: 15upx 0;
		font-size: 32upx;
	}
	.uni-common-button{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 30upx 0;
		left: 0upx;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		background: #d71511;
	}
	
</style>
<template>
    <view>
        <view class="g-header-wrap">
            <view class="g-header">
				<view class="m-head-search-box">
					<view class="m-header-left" @tap="back">
						<arrow size="50" color="#fff" direction="left"></arrow>
					</view>
					<view class="m-head-search">
						<view class="m-head-search-icon"></view>
						<input type="text" v-model="sendData.goods_name" placeholder='请输入关键字' @confirm="fSearch" @focus="finput" />
					</view>
				</view>
            </view>
            <view class="m-sort-search">
                <!-- <view class="m-sort" :style="{color: sendData.sort == '1' ? '#d71311' : ''}" data-sort="1" data-index="0"
                    @tap="tabTap">
                    <view class="u-sort-title">综合</view>
                    <view class="m-sort-icons">
                        <view class="u-arrow-up" :style="{borderBottomColor: sendData.sort == '1'&&sendData.order=='asc' ? '#d71311' : ''}"></view>
                        <view class="u-arrow-down" :style="{borderTopColor: sendData.sort == '1'&&sendData.order=='desc' ? '#d71311' : ''}"></view>
                    </view>
                </view> -->
				<block v-if="isGoodsType">
					<view class="m-sort" :style="{color: sendData.sort == 'team.has_buy_num' ? '#d71311' : ''}" data-index="0"
						:data-sort="'team.has_buy_num'" @tap="tabTap">
						<view class="u-sort-title">团购</view>
						<view class="m-sort-icons">
							<view class="u-arrow-up" :style="{borderBottomColor: sendData.sort == 'team.has_buy_num'&&sendData.order=='asc' ? '#d71311' : ''}"></view>
							<view class="u-arrow-down" :style="{borderTopColor: sendData.sort == 'team.has_buy_num'&&sendData.order=='desc' ? '#d71311' : ''}"></view>
						</view>
					</view>
					<view class="m-sort" :style="{color: sendData.sort == 'promotion_goods.shop_price' ? '#d71311' : ''}"
						data-index="1" :data-sort="'promotion_goods.shop_price'" @tap="tabTap">
						<view class="u-sort-title">价格</view>
						<view class="m-sort-icons">
							<view class="u-arrow-up" :style="{borderBottomColor: sendData.sort == 'promotion_goods.shop_price'&&sendData.order=='asc' ? '#d71311' : ''}"></view>
							<view class="u-arrow-down" :style="{borderTopColor: sendData.sort == 'promotion_goods.shop_price'&&sendData.order=='desc' ? '#d71311' : ''}"></view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="m-sort" :style="{color: sendData.sort == 'goods_id' ? '#d71311' : ''}" data-index="0"
						:data-sort="'goods_id'" @tap="tabTap">
						<view class="u-sort-title">综合</view>
						<view class="m-sort-icons">
							<view class="u-arrow-up" :style="{borderBottomColor: sendData.sort == 'goods_id'&&sendData.order=='asc' ? '#d71311' : ''}"></view>
							<view class="u-arrow-down" :style="{borderTopColor: sendData.sort == 'goods_id'&&sendData.order=='desc' ? '#d71311' : ''}"></view>
						</view>
					</view>
					<view class="m-sort" :style="{color: sendData.sort == 'shop_price' ? '#d71311' : ''}"
						data-index="1" :data-sort="'shop_price'" @tap="tabTap">
						<view class="u-sort-title">价格</view>
						<view class="m-sort-icons">
							<view class="u-arrow-up" :style="{borderBottomColor: sendData.sort == 'shop_price'&&sendData.order=='asc' ? '#d71311' : ''}"></view>
							<view class="u-arrow-down" :style="{borderTopColor: sendData.sort == 'shop_price'&&sendData.order=='desc' ? '#d71311' : ''}"></view>
						</view>
					</view>
				</block>
                <view class="m-sort" v-if="true"  @tap="showDrawer">
                    <view class="u-sort-title">筛选</view>
                    <view class="m-sort-shaixuan">
                        <image class="img" src="../../static/icons/ydt/sort-shaixuan.png" ></image>
                    </view>
                </view>
            </view>

        </view>
        <view class="g-product-box" :style="{marginTop: (statusbarH+88)+'px'}">
            <view class="m-product-list">
                <view class="m-product-list-box">

                    <navigator open-type="navigate" class="m-product" v-for="(item,index) in data" :key="index" :url="'/pages/ydt/product_detail?promotion_id='+item.promotion_id+'&goods_id='+item.goods_id+'&goods_type='+item.goods_type">
                        <image class="product-img" :src="item.thumb" mode=""></image>
                        <view class="m-product-info">
                            <view class="u-product-title">{{item.goods_name}}</view>
                            <view class="u-progress" v-if="isGoodsType">
                                <view class="u-progress-siblings">{{item.buy_bili}}%</view>
                                <view class="u-progress-have" :style="{width: item.buy_bili+'%'}"></view>
                            </view>
                            <view class="u-product-price-box">
                                <view class="u-product-price-l">
                                    <view class="u-product-price-mark">活动预订价¥</view>
                                    <view class="u-product-price">{{item.shop_price}}</view>
                                </view>
                                <view class="u-product-surplus-people" v-if="isGoodsType">剩余{{item.sy_buy_num}}人</view>
                            </view>
                        </view>
                        <image class="u-product-sign" v-if="isGoodsType" :src="item.promotion_id == 1 ? '../../static/icons/ydt/product8.png' : '../../static/icons/ydt/product_free.png' " mode="widthFix"></image>
                    </navigator>

                </view>
                
            </view>
        </view>
		
		<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer">
			
			<view style="padding:30upx;">
				<view class="uni-list uni-common-mt">
					<view class="uni-list-cell">
						<view class="text">价格范围：</view>
						<view class="g-input">
							<input type="number" v-model="sendData.shop_price1" placeholder="最低价"><text class="line"></text>
							<input type="number" v-model="sendData.shop_price2" placeholder="最高价">
						</view>
					</view>
				</view>
			</view>
			
			<view class="uni-common-button" @tap="confirm">确认</view>
		</uni-drawer>
		<view class="m-b-loading" v-if="showLoading">
		    <image src="../../static/images/loading2.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../static/images/no_data.png" mode="widthFix"></image>
		</view>
    </view>
</template>
<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                sendData: {
                    sort: '',
                    order: 'desc',
                    goods_name: '',
                    page: 1,
                    cate_id: '',
					shop_price1: '',
					shop_price2: ''
                },
                order: true,
                isTap: [true, false, false],
                data: [], // 商品数据
                showLoading: false,
                statusbarH: 0,
                showNodata: false,
				totalPages:1,//总页数
				showRigth: false,
				isGoodsType: henglang.isGoodsTpye()
            };
        },
        methods: {
            tabTap(e) { // 切换tab
                let {
                    sort,
                    isTap,
                    index
                } = e.currentTarget.dataset;
                this.sendData.sort = sort;
                if (!this.isTap[index]) {
                    this.isTap = [false, false, false];
                    this.sendData.order = "desc";
                    this.order = true;
                }
                if (this.isTap[index]) {
                    this.order = !this.order;
                    this.sendData.order = this.order ? 'desc' : 'asc';
                } else {
                    let origin = this.isTap;
                    origin[index] = true;
                    this.isTap = origin;
                }
                uni.showLoading({});
                this.sendData.page = 1;
                this.request();
            },
            request(type) {
                let that = this;
				that.showLoading = true;
				if(that.sendData.page <= that.totalPages){
					henglang.get('goods/searchGoods',that.sendData,false,function(res){
						if (res.data.data.length) {
							that.showNodata = false;
							if (type == 'plus') {
								that.data = that.data.concat(res.data.data);
							} else {
								that.showLoading = false;
								that.data = res.data.data;
								that.totalPages = res.data.total_pages;
							}
						} else {
							that.showLoading = false;
							that.showNodata = true;
							that.data = ''
						}
					});
					uni.hideLoading();
				}else{
					that.showLoading = false;
				}
            },
            fSearch() {
                uni.showLoading({});
                this.sendData.page = 1;
                this.sendData.cate_id = '';
                this.sendData.promotion_id = '';
                this.request();
            },
			finput() {
				this.sendData.goods_name = '';
			},
            back() {
                uni.navigateBack()
            },
			showDrawer() {
				this.showRigth = true
			},
			closeDrawer(){
				this.showRigth = false
			},
			confirm() {
				uni.showLoading({});
				if(Number(this.sendData.shop_price1) > Number(this.sendData.shop_price2)){
					henglang.showToast('请输入正确的价格范围',1000)
				}else{
					this.sendData.shop_price1 = this.shop_price1;
					this.sendData.shop_price2 = this.shop_price2;
					this.request();
					this.showRigth = false;
				}
				
			}
        },
        onLoad({
            goods_name='',
            id='',
            promotion_id=''
        }) {
            this.sendData.goods_name = goods_name;
            this.sendData.cate_id = id;
            this.sendData.promotion_id = promotion_id;
			this.sendData.sort = this.isGoodsType?'team.has_buy_num':'goods_id';
            uni.showLoading({});  
            this.request();
        },
        onReady() {
			//#ifdef APP-PLUS
            this.statusbarH = plus.navigator.getStatusbarHeight();
			//#endif
        },
        onReachBottom() {
			
			this.sendData.page = ++this.sendData.page;
            this.showLoading = true;
            this.request('plus');
        }
    }
</script>
